<template>
    <div class="main-container">
        <div class="main-content">
            <div class="content-header">
                <div class="logo">
                    <img src="../assets/images/logo.jpg"/>
                    <b>沐晨校园管理</b>
                </div>

                <el-dropdown class="user">
                    <el-avatar style="width: 40px; height: 40px" icon="el-icon-user-solid"></el-avatar>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="editPassword">修改密码</el-dropdown-item>
                        <el-dropdown-item @click.native="back">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="main-aside">
                <el-menu
                    mode="horizontal"
                    background-color="#00BFFF"
                    text-color="#fff"
                    active-text-color="#1E90FF"
                    @select="handlerSelect"
                >
                    <el-menu-item index="/home">
                        <i class="el-icon-s-home" style="color: #1E90FF"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu
                        v-for="item in menuList"
                        :index="item.path"
                        :key="item.path"
                    >
                        <template slot="title">
                            <i :class="item.icon" style="color: #1E90FF"></i>
                            <span slot="title">{{item.name}}</span>
                        </template>
                            <el-menu-item
                                v-for="child in item.children"
                                :index="child.path"
                                :key="child.path"
                            >
                                {{child.mate.title}}
                            </el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="tags-view-container">
                <el-tag
                    v-for="(item, index) in testList"
                    :key="index"
                    @click="toPage(item)"
                    size="small"
                    closable
                    @close="deleteTag(index)"
                    style="margin-left: 10px"
                >
                    {{item.title}}
                </el-tag>
            </div>
        </div>
        <div class="content-view">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import routerList from '../router/index.js'

export default {
    computed: {
        menuList () {
            //院系管理路由
            let majorManagementManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('majorManagement')
            })

            //图书管理路由
            let libraryManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('libraryManagement')
            })

            //教师管理路由
            let teacherManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('teacherManagement')
            })
            
            //学生管理路由
            let studentManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('studentManagement')
            })
            //宿舍管理路由
            let dormitoryManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('dormitoryManagement')
            })
            //系统管理路由
            let systemManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('systemManagement')
            })

            return [
                // el-icon-notebook-1   图书管理
                {
                    path: '/majorManagement',
                    name: '专业管理',
                    icon: 'el-icon-s-check',
                    children: majorManagementManagementList
                },
                {
                    path: '/libraryManagement',
                    name: '图书管理',
                    icon: 'el-icon-s-management',
                    children: libraryManagementList
                },
                {
                    path: '/teacherManagement',
                    name: '教师管理',
                    icon: 'el-icon-s-custom',
                    children: teacherManagementList
                },
                {
                    path: '/studentManagement',
                    name: '学生管理',
                    icon: 'el-icon-user-solid',
                    children: studentManagementList
                },
                {
                    path: '/dormitoryManagement',
                    name: '宿舍管理',
                    icon: 'el-icon-s-finance',
                    children: dormitoryManagementList
                },
                {
                    path: '/systemManagement',
                    name: '系统管理',
                    icon: 'el-icon-s-tools',
                    children: systemManagementList
                }
            ]
        }
    },
    data () {
        return {
            routerList: [],
            testList: []
        }
    },
    mounted () {
        this.testList = JSON.parse(sessionStorage.getItem('routeList'))
        this.routeTagList = JSON.parse(sessionStorage.getItem('routeList')) || []
    },
    watch: {
        $route: {
            handler (newValue) {
                let allRoute = routerList.options.routes[1].children

                let index = allRoute.findIndex(item => {
                    return newValue.path === item.path
                })

                // 如果当前跳转的路由已经存在this.routeTagList中,那么就不push
                let tagIndex = this.routeTagList.findIndex(item => {
                    return newValue.path === item.path
                })

                if (tagIndex >= 0) {
                    return
                }
                this.routeTagList.push({
                    path: newValue.path,
                    title: allRoute[index].mate.title
                })

                sessionStorage.setItem('routeList', JSON.stringify(this.routeTagList))

                this.testList = JSON.parse(sessionStorage.getItem('routeList'))
            }
        }
    },
    methods: {
        handlerSelect (item) {
            if (this.$route.path === item) {
                return
            }

            this.$router.push({
                path: item
            })
        },
        deleteTag (index) {
            this.routeTagList.splice(index, 1)

            sessionStorage.setItem('routeList', JSON.stringify(this.routeTagList))
            this.testList = JSON.parse(sessionStorage.getItem('routeList'))
        },
        toPage (item) {
            this.$router.push({
                path: item.path
            })
        },
        editPassword () {
            this.$router.push({
                path: '/editPassword'
            })
        },
        back () {
            this.$router.push({
                path: '/login'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .main-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;


        .main-content {
            display: flex;
            flex-direction: column;
            .content-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #ddd;
                box-shadow: 0 1px 2px #ddd;

                .logo {
                    display: flex;
                    align-items: center;
                    img {
                        width: 100px;
                        height: 50px;
                    }

                    b {
                        font-size: 30px;
                        color: #00BFFF;
                    }
                }

                .user {
                    margin-right: 30px;
                    box-sizing: border-box;

                    .el-avatar {
                        background: #00BFFF;
                        color: #fff;
                    }
                }
            }

            .main-aside {
                display: flex;
                width: 100%;
                height: 60px;
                background-color: #00BFFF;
            }

            .tags-view-container {
                display: flex;
                align-items: center;
                border-top: 1px solid #ddd;
                height: 34px;
                border-bottom: 1px solid #ddd;
            }
        }

        .content-view {
            flex: 1;
        }
    }
</style>